<template>
  <l-layout class="l-tab-page">
    <l-panel>
      <l-table
        :loading="tableLoading"
        :columns="columns"
        :dataSource="tableData"
        rowKey="f_AreaId"
        :lazy="true"
        :load="load"
        isTree
      >
      </l-table>
    </l-panel>
  </l-layout>
</template>

<script>
export default {
  inject: ["admin"],
  props: {},
  data() {
    return {
      lr_isPage: true,

      columns: [
        { label: "名称", prop: "f_AreaName", minWidth: "100" },
        { label: "编号", prop: "f_AreaCode", width: "100" },
      ],
      tableLoading: false,
      tableData: [],
    };
  },

  computed: {},
  mounted() {
    this.loadTableData();
  },
  methods: {
    async loadTableData() {
      this.tableLoading = true;
      await this.lr_loadAreas("0", false);
      this.tableData = this.lr_areas["0"];
      this.tableLoading = false;
    },
    async load({row}) {
      await this.lr_loadAreas(row.f_AreaId, false);
      return this.lr_areas[row.f_AreaId];
    }
  },
};
</script>
